<template>
  <a-modal v-model="visible" title="工时详情" :width="750" :footer="null" @cancel="$emit('update:visible', false)">
    <div class="modal-box">
      <div class="m-box">
        <a-list-item-meta>
          <div slot="title" class="tit">
            <div>{{ empName }}</div>
          </div>
          <div slot="description" class="description">
            <div>{{ empPhone }}</div>
            <div>|</div>
            <div>岗位：{{ positionName }}</div>
          </div>
          <a-avatar slot="avatar" :src="avatar" class="avatar" />
        </a-list-item-meta>
      </div>
      <div class="xq-form-wrapper" style="margin-bottom: 10px">
        <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
          <a-table
            :scroll="{ x: columns.length * 150 }"
            :pagination="false"
            :dataSource="tableData"
            :columns="columns"
            class="xq-form-content-table"
          >
            <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
              <span :key="index">
                {{ col.customTitle }}
              </span>
            </template>
            <!-- eslint-disable-next-line prettier/prettier -->
            <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text">
              <span :key="index">
                <span>{{ text }}</span>
              </span>
            </template>
          </a-table>
          <!-- <div class="xq-form-content-pagination">
            <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
            <a-pagination
              v-model="pageNo"
              :page-size="pageSize"
              :total="total"
              :show-size-changer="true"
              :show-quick-jumper="true"
              :page-size-options="['10', '20', '50', '100']"
              @change="onPageChange"
              @showSizeChange="onPageSizeChange"
            />
          </div> -->
        </a-spin>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { getWorkHoursInfoById } from "../api";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    attendanceDataTempId: {
      type: String,
      default: ""
    }
  },
  watch: {
    visible(v) {
      this.columns = [
        {
          title: "类型",
          dataIndex: "name",
          scopedSlots: { customRender: "name" }
        }
      ];
      if (v) this.onGetWorkHoursInfoById();
    }
  },
  data() {
    return {
      spinning: false,
      columns: [],
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      num: 2,
      empName: "",
      empPhone: "",
      positionName: "",
      avatar: ""
    };
  },
  methods: {
    async onGetWorkHoursInfoById() {
      try {
        this.spinning = true;
        const { data } = await getWorkHoursInfoById(this.attendanceDataTempId);
        // const data = ["类型", "所有工种"];
        // const workingHours = JSON.parse(data.workingHours);
        const one = {
          name: "上班天数"
        };
        const two = {
          name: "工资影响"
        };
        data.workType.forEach((e, i) => {
          this.columns.push({
            title: e,
            dataIndex: `k${i}`,
            scopedSlots: { customRender: `k${i}` }
          });
          one[`k${i}`] = data.workDay[i];
          two[`k${i}`] = data.workSalary[i];
        });
        this.tableData = [one, two];
        this.empName = data.empName;
        this.empPhone = data.empPhone;
        this.positionName = data.positionName;
        this.avatar = data.avatar;
        // this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetWorkHoursInfoById();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetWorkHoursInfoById();
    }
  }
};
</script>

<style lang="scss" scoped>
.modal-box {
  padding: 10px 62px;
  .m-box {
    .tit {
      display: flex;
      margin-top: 12px;
      font-size: 18px;
    }
    .avatar {
      width: 66px;
      height: 66px;
    }
    .description {
      display: flex;
      div:nth-child(2) {
        width: 26px;
        text-align: center;
      }
    }
  }
}
</style>
